{% extends "user/user.html" %}
{% load static %}
{% block title %}搜索：{{query}}{% endblock title %}
{% block page_title %}搜索结果{% endblock page_title %}
{% block haed_files %}
    <link rel="stylesheet" href="{% static 'css/search.css' %}">
{% endblock haed_files %}
{% block index_block %}
    {% csrf_token %}
    <div class="result_word">
        <div class="keyword">{{query}}</div>的搜索结果为：
    </div>
    <div class="product_details_list">
            <ul>
                {% for good in page %}
                <li>
                    <a href="{% url 'goods:detail' good.object.id %}"
                        ><img
                            src=" {{good.object.image.url}} "
                            alt=""
                    /></a>
                    <a href="{% url 'goods:detail' good.object.id %}">{{good.object.name}}</a>
                    <div>
                        <span>￥{{good.object.price}}</span>
                        <p>{{good.object.price}}/{{good.object.unite}}</p>
                        <a id="{{good.object.id}}" class="add_cart" href="javascript:;"
                            ><img
                                src="{% static 'image/购物车.png' %}"
                                alt=""
                        /></a>
                        <div class="add_cart_num">+1</div>
                    </div>
                    <div class="bottom_bar"></div>
                </li>
                {% empty %}
                <a href="{% url 'goods:index' %}">暂时没有商品，去别地儿逛逛呗！</a>
                {% endfor %}
            </ul>
    </div>
    <div class="demo" style="margin-top:30px">
	        <div class="container" style="width:auto">
	            <div class="row pad-15">
	                <div class="col-md-12">
	                    <nav class="pagination-outer" aria-label="Page navigation">
	                        <ul class="pagination">
                                {% if page.has_previous %}
                                 <li class="page-item">
	                                <a href="/search?q={{query}}&page={{page.previous_page_number}}" class="page-link" aria-label="Previous">
	                                    <span aria-hidden="true">&laquo;</span>
	                                </a>
	                            </li>
                                {% endif %}
                                {% for page_index in paginator.page_range %}
                                    {% if page.number == page_index %}
                                        <li class="page-item active"><a class="page-link" href="/search?q={{query}}&page={{page_index}}">{{page_index}}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="/search?q={{query}}&page={{page_index}}">{{page_index}}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if page.has_next %}
                                <li class="page-item">
	                                <a href="/search?q={{query}}&page={{page.next_page_number}}" class="page-link" aria-label="Next">
	                                    <span aria-hidden="true">&raquo;</span>
	                                </a>
	                            </li>
                                {% endif %}
	                        </ul>
	                    </nav>
	                </div>
	            </div>
	        </div>
	    </div>
{% endblock index_block %}
{% block bottom_file %}
    <script>
        $(function() {
            //购物车
            $('.add_cart').click(function () {
                //下面需要 所以这里负值给变量
                let a = $(this)

                let sku_id = $(this).prop('id');
                let csrfmiddlewaretoken = $('body > input[type=hidden]').val()
                $.post(
                    "/cart/add",
                    {'count':1,'sku_id':sku_id,'csrfmiddlewaretoken':csrfmiddlewaretoken},
                    function(data){
                        if(data.res==5){
                            //一点击就显示出来
                            a.next().css({
                                opacity:1,
                            })
                            //慢慢上滑消失
                            a.next().animate({
                                opacity:0,
                                top:165,
                            },
                            'slow',
                            callback = function () {
                                //默默回到原位
                                    a.next().css({
                                        top:199,
                                    })
                                }
                            )
                            $('body > div.search_mine > div.cart_mine > p').html(data.total_count)
                        }
                        else{
                            alert(data.errmsg)
                        }
                    }
                )
            })
        })
    </script>
{% endblock bottom_file %}